<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>ITArmy</title>
    <link rel="icon" type="image/x-icon" href="/static/images/logoIcon.icon">
    <!--<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css" />-->
    <link rel="stylesheet" type="text/css" href="/static/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/static/css/personalData.css"/>
    <script type="text/javascript" src="/static/js/jquery-3.4.0.js"></script>
    <script type="text/javascript" src="/static/js/personalData.js"></script>
</head>
<body th:style="'background-color : ' + ${session.config.color1}">
<!--顶部导航部分-->
<div class="nav">
    <!--导航居中样式-->
    <div class="navCenter">
        <div class="navLeft">
            <!--logo-->
            <div class="logo">
                <a href="/user/index"><img src="/static/images/logo.png"/></a>
            </div>
            <!--主页-->
            <div class="mainPage"><a href="/user/index">首页</a></div>

            <!--左侧未登录导航-->
            <!--下载App-->
            <div class="download" th:if="${session.user==null}"><a href="">下载App</a></div>
            <!--下载App隐藏部分-->
            <div class="downloadHide">
                <img src="/static/images/QRCode.jpg">
            </div>
            <!--左侧登录后导航将下载App换为关注和消息部分-->
            <!--关注-->
            <div class="attention" th:if="${session.user!=null}"><a href="/focus/focusInformation">关注</a></div>
            <!--消息-->
            <div class="information" th:if="${session.user!=null}"><a href="/message/getCommentMessage">消息</a></div>
            <div th:if="${session.message.all!=0}" style="display: inline-block">
                <div class="informationIcon" th:text="${session.message.all}"></div>
            </div>

            <!--搜索部分-->

            <div class="search">
                <form action="/serialize/selectBS" method="get">
                    <input type="text" name="name" class="navInput"/>
                    <button class="navBtn" type="submit"><i class="fa fa-search"></i></button>
                </form>
            </div>
        </div>

        <!--<a href="/user/sign">登录</a>-->
        <!--右侧导航-->
        <div class="navRight">
            <!--右侧未登录导航有登录注册部分-->
            <div class="signIn" th:if="${session.user==null}">
                <a href="/user/sign">登录</a>
            </div>

            <!--<ul>-->
            <!--<li><a th:if="${session.user==null}" href="/user/sign">登录</a></li>-->
            <!--<li><a th:if="${session.user!=null}" href="/user/loginOut">退出</a></li>-->
            <!--</ul>-->
            <div class="register" th:if="${session.user==null}"><a href="/user/registerPage">注册</a></div>
            <!--右侧已登录导航有个人信息图片部分-->
            <!--个人信息图片部分-->

            <div th:if="${session.user!=null}" class="myselfPic"><img th:src="${session.user.uHead}">
                <i class="fa fa-sort-down" id="myselfDown"></i>
                <i class="fa fa-sort-up" id="myselfUp"></i>
            </div>
            <!--登录后显示个人信息图片下拉菜单-->
            <ul class="myselfDownList" style="padding-left: 0;margin-top: 0">
                <a href="/user/PersonalPage">
                    <li><i class="fa fa-user"></i> 个人中心</li>
                </a>
                <a href="/user/personalData">
                    <li><i class="fa fa-drivers-license-o"></i> 我的资料</li>
                </a>
                <a href="/focus/focusInformation">
                    <li><i class="fa fa-check-square-o"></i> 我的收藏</li>
                </a>
                <a href="/message/getCommentMessage">
                    <li><i class="fa fa-group"></i> 我的消息</li>
                </a>
                <li class="loginOut" style="cursor: pointer"><i class="fa fa-reply-all"></i> 退出</li>
            </ul>
            <!--写文章按钮-->
            <a href="/test/editor">
                <div class="write">写文章</div>
            </a>

        </div>
    </div>
</div>
<!--主页主体部分-->
<div class="mainPageBody">
    <!--左侧导航条-->
    <div class="leftNav">

    </div>
    <div class="right">
        <!--右侧头部标题-->
        <h1 class="rightTitle">个人资料</h1>
        <!--用户信息头像-->
        <div class="user">
            <div class="userPhotoChange">
                <div class="userPhoto">
                    <img th:src="${session.user.uHead}">
                </div>
                <!--连接本地的文件选择图片-->
                <p>修改头像</p>
                <div class="bg-model">　　
                    <div class='content'>
                        <h3>选择上传图片</h3>
                        <form action="/user/uploadUhead" enctype="multipart/form-data" method="post">
                            <input type="file" name="uHeaed" id="user"/>
                            <button type="submit" class="bg-model-sure">确定</button>
                            <button class="bg-model-ok">取消</button>
                        </form>
                    </div>
                </div>
            </div>
            <!--用户基本信息-->
            <div class="userInformation">
                <div class="userID">Email : <span class="userIDNumber" th:text="${session.user.uEmail}">1360230174@qq.com</span>
                </div>
                <div class="userVip">
                    <!--等级-->
                    <span>用户等级：</span>
                    <div class="userVipLeft" th:text="${session.user.uGrade}">等级</div>
                    <!--判断是否Vip并显示-->
                    <span>Vip：</span>
                    <div class="userVipRight" th:text="${session.user.uVip}"></div>
                </div>
                <!--ITArmy记忆-->
                <div class="ITArmymemory">ITArmy记忆：于 <span
                        th:text="${#dates.format(session.user.uTime,'yyyy-MM-dd HH:mm:ss')}"
                        style="color: #207ad2"></span> 加入。。。
                </div>
            </div>
        </div>
        <form action="/user/updateUserByUser" method="POST">
            <!--昵称部分鼠标触碰加样式-->
            <div class="userName">昵称：<input name="uName" type="text" th:value="${session.user.uName}"/>
            </div>
            <!--手机部分切换绑定手机号或者更换已绑定手机-->
            <div class="userPhone">手机：
                <input class="userPhoneNumber" name="uTel" th:value="${session.user.uTel}"
                       style="outline: none;" placeholder="点此绑定手机号"/>
            </div>
            <!--性别部分的单选框-->
            <div class="userGender">性别：
                <input type="radio" class="inputMan" name="uSex" value="male"> 男
                <input type="radio" class="inputWoman" name="uSex" value="female"> 女
            </div>
            <!--个人简介部分-->
            <div class="userText"><span class="userTextTitle">个人简介：</span>
                <textarea rows="5" name="uSingnature" th:text="${session.user.uSingnature}"></textarea>
            </div>
            <!--管理账号部分-->
            <div class="userEmail">账号管理：
                <div class="userEmailChoose">
                    <span class="userEmailChooseChange"> 切换账号</span>|
                    <span class="userEmailChooseBack"><a href="/user/sign">退出登录</a></span>|
                    <span class="userEmailChooseNone"><a href="/user/loginOut">注销账号</a></span>
                </div>
            </div>
            <!--切换账号部分的模态框-->
            <div class="bg-model-change">　　
                <div class='content'>
                    <h3>确定切换账号重新登录？</h3>
                    <button class="bg-model-sure">确定</button>
                    <button class="bg-model-ok">取消</button>
                </div>
            </div>
            <!--提交保存部分-->
            <div class="button">
                <button class="buttonSubmit" type="submit">提交更改</button>
                <button class="buttonGiveUp">放弃更改</button>
            </div>
        </form>
    </div>
</div>
</body>
<script type="text/javascript" src="/static/js/canves.js"></script>
</html>
